<template>
	<view class="uni_box home">
		<navbar title='添加产品'>
		</navbar>
		<view class="content">
			<view class="addlist">
				<view class="additem">
					<text class="name">{{$t('i.addspname')}}</text>
					<view class="iview">
						<u-input v-model="form.name" type="text" :border="border" :password-icon="passwordIcon" placeholder='请输入' />
					</view>
				</view>
				<view class="additem">
					<text class="name">{{$t('i.addmiao')}}</text>
					<view class="iview" style="height: auto;">
						<u-input v-model="form.synopsis" style="min-height: 200rpx;" maxlength="5000" type="textarea" :border="border" :password-icon="passwordIcon" placeholder='请输入' />
					</view>
				</view>

				<view class="additem">
					<text class="name">{{$t('i.guige')}}</text>
					<view class="guiview">
						<view class="guiitem" @click="guiClick(1)">
							<image :src="form.specs==1?'/static/addquans.png':'/static/addquan.png'" class="stars"/>
							<text>{{$t('i.da')}}</text>
						</view>
						<view class="guiitem" @click="guiClick(2)">
							<image :src="form.specs==2?'/static/addquans.png':'/static/addquan.png'" class="stars"/>
							<text>{{$t('i.zhong')}}</text>
						</view>
						<view class="guiitem" @click="guiClick(3)">
							<image :src="form.specs==3?'/static/addquans.png':'/static/addquan.png'" class="stars"/>
							<text>{{$t('i.xiao')}}</text>
						</view>
					</view>
				</view>
				<view class="additem">
					<text class="name">{{$t('i.shuliang')}}</text>
					<view class="iview">
						<u-input v-model="form.number" type="text" :border="border" :password-icon="passwordIcon" placeholder='请输入' />
					</view>
				</view>
				<view class="additem">
					<text class="name">{{$t('i.jiage')}}</text>
					<view class="iview">
						<u-input v-model="form.price" type="text" :border="border" :password-icon="passwordIcon" placeholder='请输入' />
						<text class="rtext">USD</text>
					</view>
				</view>
				<view class="additem">
					<text class="name">{{$t('i.yunfei')}}</text>
					<view class="guiview">
						<view class="guiitem"  @click="yunClick(1)">
							<image :src="form.freight_from==1?'/static/addquans.png':'/static/addquan.png'" class="stars"/>
							<text>{{$t('i.maione')}}</text>
						</view>
						<view class="guiitem"  @click="yunClick(2)">
							<image :src="form.freight_from==2?'/static/addquans.png':'/static/addquan.png'" class="stars"/>
							<text>{{$t('i.maitwo')}}</text>
						</view>
					</view>
				</view>
				<view class="additem">
					<text class="name">{{$t('i.guojiyunfei')}}</text>
					<view class="iview">
						<u-input v-model="form.freight" type="text" :border="border" :password-icon="passwordIcon" placeholder='请输入' />
						<text class="rtext">USD</text>
					</view>
				</view>
				<view class="additem">
					<text class="name">{{$t('i.fengmian')}}</text>
					<view class="shangchuan">
						
						<view class="tuview" v-if="form.img == ''" @click="upload(1)">
							<image src="/static/shangchuan.png" class="tuimg"/>
						</view>
						<view class="tuview" v-else>
							<image :src="form.img" class="tuimg"/>
							<image src="/static/delete.png" class="delete"  @click="getdelete(1,'')"/>
						</view>
					</view>
				</view>
				<view class="additem">
					<text class="name">{{$t('i.spdetail')}}</text>
					<view class="shangchuan">
						<view class="tuview" v-if="form.imgs" v-for="(item,index) in form.imgs" :key="index">
							<image :src="item" class="tuimg"/>
							<image src="/static/delete.png" class="delete" @click="getdelete(2,index)"/>
						</view>
						<view class="tuview" v-if="form.imgs.length <= 5" @click="upload(2)">
							<image src="/static/shangchuan.png" class="tuimg"/>
						</view>
						
						
					</view>
				</view>
				<view class="tijiao" @click="gettijiao">{{$t('i.shangjia')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
		baseUrl
	} from '@/utils/config.js';
	export default {
		data() {
			return {
				password:'',
				border:false,
				passwordIcon:false,
				form:{
					// id:'',
					name:'',//名称
					synopsis:'',//描述
					specs:'',//规格 1:大、2:中、3:小
					number:'',//数量
					price:'',//价格
					freight_from:'',//运费付款方 1:买方、2:卖方
					freight:'',//运费
					img:'',//封面
					imgs:[],//详情图
				},
				updatetype:1,//1封面图 2商品详情图
				headimg:'',
				id:'',
				info:{}
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
				this.gethuixian();//回显
			}
		},
		onShow() {
		},
		methods: {
			async gethuixian(){
				let res = await this.$u.api.productinfo({
					id:this.id
				});
				this.info = res.info
				let r = res.info
				this.form.name = r.name
				this.form.synopsis = r.synopsis
				this.form.specs = r.specs
				this.form.number = r.number
				this.form.price = r.price
				this.form.freight_from = r.freight_from
				this.form.freight = r.freight
				this.form.img = r.img
				this.form.imgs = r.imgs
			},
			// this.$u.toast("提货成功");
			async gettijiao(){
				// if(!this.form.name){
				// 	this.$u.toast("请输入名称");
				// }
				let form = this.form
				let status = true
				for(let i in form){
					// console.log(i)
					if(!form[i]||form[i]==''&&i!='id'){
						status = false
					}
				}
				if(!status){
					console.log(form)
					this.$u.toast(this.$t('i.ws'));
					return;
				}
				if(this.id){
					this.form.id = this.id
				}
				console.log(form)
				let res = await this.$u.api.productpost(form);
				this.$u.toast(this.$t('i.sucesss'));
				setTimeout(() => {
					uni.navigateBack()
				}, 1000);

			},
			guiClick(e){
				this.form.specs = e
			},
			yunClick(e){
				this.form.freight_from = e
			},
			upload(e) {
				this.updatetype = e
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.headimg = tempFilePaths[0];
						// this.isClick = true;
						this.unloadtou()
					}
				});
			},
			unloadtou(){
				// console.log(this.head_portrait)
				let that = this
				uni.uploadFile({
					url: baseUrl + '/upload', //仅为示例，非真实的接口地址
					filePath: this.headimg,
					name: 'file',
					header: {
						// 'content-type': 'application/json;charset=UTF-8',
						'ApiToken': uni.getStorageSync('token'),
					},
					formData: {
						'ApiToken':uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data));
						if(JSON.parse(uploadFileRes.data).code == 0){
							if(that.updatetype == 1){
								//封面
								that.form.img = JSON.parse(uploadFileRes.data).data.src
							}else if(that.updatetype == 2){
								//商品详情
								that.form.imgs.push(JSON.parse(uploadFileRes.data).data.src)
								console.log(that.form.imgs)
							}
						}else{
							that.$u.toast(JSON.parse(uploadFileRes.data).msg);
						}
						// that.getinfo()
					}
				});
			},
			getdelete(e,index){
				console.log(e)
				if(e == 1){
					this.form.img = ''
				}else if(e == 2){
					let imgs = this.form.imgs
					imgs.splice(index,1)
					this.form.imgs = imgs
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		.addlist{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			.additem{
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;
			}
			.name{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
				display: block;
				margin-bottom: 20rpx;
			}
			.iview{
				width: 100%;
				height: 80rpx;
				background: #F5F5F5;
				border-radius: 5rpx;
				padding:0 30rpx;
				position: relative;
				display: flex;
				flex-direction: row;
				align-items: center;
				.rtext{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
			.shangchuan{
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
			}
			.tuview{
				width: 140rpx;
				height: 140rpx;
				border-radius: 5rpx;
				position: relative;
				margin-right: 30rpx;
				.tuimg{
					width: 100%;
					height: 100%;
					border-radius: 5rpx;
				}
				.delete{
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					width: 24rpx;
					height: 24rpx;
					z-index: 10;
				}
			}
			.guiview{
				display: flex;
				flex-direction: row;
				.guiitem{
					width: 33.33%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.stars{
						width: 30rpx;
						height: 30rpx;
						margin-right: 8rpx;
					}
					text{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
					}
				}
			}
		}
		.tijiao{
			height: 88rpx;
			background: #8A1596;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 100rpx;
			margin-bottom: 50rpx;
		}
	}
/deep/uni-input {
	min-height: 80rpx !important;
	height: 100%;
	display: flex;
    align-items: center;
}	
</style>
